<template>
  <el-dialog
    :visible.sync="dialogVisible"
    custom-class="direction-dialog"
    width="680px"
    title="方向设置"
    :before-close="handleCancel"
  >

    <div class="dialog-content">
      <div class="direction-type-selector">
        <div 
          class="type-card" 
          :class="{active: angleForm.dirTp === 1}"
          @click="angleForm.dirTp = 1"
        >
          <div class="card-icon">
            <i class="el-icon-s-operation"></i>
          </div>
          <div class="card-content">
            <h3>角度设置</h3>
            <p>通过精确的角度值控制方向</p>
          </div>
        </div>
        
        <div 
          class="type-card" 
          :class="{active: angleForm.dirTp === 2}"
          @click="angleForm.dirTp = 2"
        >
          <div class="card-icon">
            <i class="el-icon-bottom"></i>
          </div>
          <div class="card-content">
            <h3>垂直设置</h3>
            <p>设置垂直方向指针</p>
          </div>
        </div>
      </div>

      <div class="direction-controls">
        <div v-if="angleForm.dirTp === 1" class="angle-control">
          <h4>角度值设置</h4>
          <div class="angle-input-container">
            <el-slider 
              v-model="angleForm.angle" 
              :min="0" 
              :max="360" 
              :step="1"
              show-input
              input-size="mini"
              class="angle-slider"
            ></el-slider>
            <div class="angle-visual">
              <div class="compass">
                <div class="direction-arrow" :style="{transform: `rotate(${angleForm.angle}deg)`}"></div>
              </div>
              <div class="angle-value">{{ angleForm.angle }}°</div>
            </div>
          </div>
        </div>

        <div v-if="angleForm.dirTp === 2" class="vertical-control">
          <h4>指针方向</h4>
          <div class="direction-options">
            <div 
              class="direction-option" 
              :class="{selected: angleForm.clockwise === 1}"
              @click="angleForm.clockwise = 1"
            >
              <div class="option-icon">
                <i class="iconfont">&#xe6e1;</i>
              </div>
              <span>顺时针</span>
            </div>
            
            <div 
              class="direction-option" 
              :class="{selected: angleForm.clockwise === 2}"
              @click="angleForm.clockwise = 2"
            >
              <div class="option-icon">
                <i class="iconfont">&#xe762;</i>
              </div>
              <span>逆时针</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="btnGroup">
      <el-button @click="handleCancel" size="small" class="cancel-btn" icon="el-icon-circle-close">取消</el-button>
      <el-button type="primary" @click="handleConfirm" size="small" class="confirm-btn" icon="el-icon-circle-check">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DirectionDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    angleForm: {
      type: Object,
      default: () => ({
        dirTp: 1,
        angle: 0,
        clockwise: 1
      })
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
    };
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    },
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal);
    },
  },
  methods: {
    handleCancel() {
      this.dialogVisible = false;
      this.$emit('cancel');
    },
    handleConfirm() {
        this.$emit('confirm', { ...this.angleForm });
    }
  }
};
</script>

<style lang="scss" scoped>
.direction-dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
    overflow: hidden;
    
    &__header {
      padding: 0;
      background: linear-gradient(135deg, #409EFF 0%, #64b5ff 100%);
      color: white;
    }
    
    &__body {
      padding: 0;
    }
  }
  
  .dialog-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 500;
    
    i {
      margin-right: 8px;
      font-size: 18px;
    }
  }
  
  .dialog-content {
    padding: 20px;
  }
  
  .direction-type-selector {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    
    .type-card {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 16px;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #409EFF;
        box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
      }
      
      &.active {
        border-color: #409EFF;
        background-color: rgba(64, 158, 255, 0.05);
      }
      
      .card-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ecf5ff;
        border-radius: 6px;
        margin-right: 12px;
        
        i {
          font-size: 20px;
          color: #409EFF;
        }
      }
      
      .card-content {
        h3 {
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 4px;
          color: #303133;
        }
        
        p {
          font-size: 12px;
          color: #909399;
          margin: 0;
        }
      }
    }
  }
  
  .direction-controls {
    h4 {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 16px;
      color: #303133;
    }
    
    .angle-control {
      .angle-input-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 12px;
      }
      
      .angle-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        
        .compass {
          position: relative;
          width: 200px;
          height: 200px;
          background: url('../../../assets/image/u711.png') no-repeat;  
          background-size:contain;
          background-position: center;
          
          .direction-arrow {
            position: absolute;
            top: calc(50% - 83px);
            left: calc(50% - 6px);
            width: 14px;
            height: 90px;
            background: url('../../../assets/image/arrow.png') no-repeat;
            background-size: contain;
            transform-origin: center 84.5px; /* 设置旋转原点为底部中心 */
            transform: translate(-50%, -100%) rotate(0deg); /* 居中并调整位置 */
            transition: transform 0.3s ease;
          }
        }
        
        .angle-value {
          font-size: 24px;
          font-weight: 500;
          color: #409EFF;
          min-width: 70px;
          text-align: center;
        }
      }
      
      .angle-tip {
        font-size: 12px;
        color: #909399;
        margin: 8px 0 0;
      }
    }
    
    .vertical-control {
      .direction-options {
        display: flex;
        gap: 16px;
        
        .direction-option {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 16px;
          border: 1px solid #e6e6e6;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:hover {
            border-color: #409EFF;
          }
          
          &.selected {
            border-color: #409EFF;
            background-color: rgba(64, 158, 255, 0.05);
          }
          
          .option-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ecf5ff;
            border-radius: 50%;
            margin-bottom: 8px;
            
            i {
              font-size: 20px;
              color: #409EFF;
            }
          }
          
          span {
            font-size: 14px;
            color: #606266;
          }
        }
      }
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e6e6e6;
    
    .cancel-btn, .confirm-btn {
      min-width: 80px;
    }
  }
}
</style>